import React, { useEffect, useState } from 'react';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

function MyBraftEditor(props) {
    const { onChange, value, style } = props
    const [editorState, setEditorState] = useState(BraftEditor.createEditorState(value))

    const handleChange = (editorState) => {
        setEditorState(editorState)
        if (onChange) {
            onChange(editorState.toText())
        }
    }
    useEffect(() => {
        //editorState的值与父组件传来的值可能不同
        if (editorState.toText != value) {
            setEditorState(value)
        }
    }, [value])
    return (
        <div>
            <BraftEditor value={editorState} onChange={handleChange} placeholder="请输入" style={style} />
        </div>
    );
}

export default MyBraftEditor;